<template>
    <div class="data">
        <el-card class="move">
           <span>巴法</span>
           <div class="mychart" ref="myChart"></div>
        </el-card>
    </div>
</template>

<script>
    // 数据有4-6s的延时
    import {getBcloud} from '../../../api/data'
    import * as echarts from 'echarts'
    export default {
        name: 'DataTCP',
        data(){
            return {
                // tcp -- 巴法云
                user:{
                    uid: '',
                    topic: 'AXL345', //订阅主题AXL345
                    type: '3'
                },
                
                date: [], 
                X: [],  // x轴数据
                Y: [],  // y轴数据
                Z:[],   // z轴数据
                index: 0  // 计时的标记
            }
        },
        methods:{
            chartUpdata(){
                // 数据装载
                getBcloud(this.user).then(res => {
                    let msg = res.data.data[0].msg
                    console.log(`当前的数据${msg}`)
                    let data = msg.split('#')
                    this.index++
                    this.X.shift()
                    this.Z.shift()
                    this.Y.shift()
                    this.date.shift()
                    this.X.push(parseFloat(data[2]))
                    this.Y.push(parseFloat(data[4]))
                    this.Z.push(parseFloat(data[6]))
                    this.date.push(this.index)
                })
                // 重新写入数据的图表的option渲染
                this.myChart.setOption({
                    xAxis:{
                            data:this.date
                        },
                    series:[ {
                            data: this.X,
                            type: 'line',
                            smooth: true
                        },
                        {
                            data: this.Y,
                            type: 'line',
                            smooth: true
                        },
                        {
                            data: this.Z,
                            type: 'line',
                            smooth: true
                        }]})
            },
            initArray(list) {
                // 将数组push 0,初始化好
                for(let i=0; i <20;i++){
                    list.push(0)
                }
            }
        },
        mounted() {
            this.myChart = echarts.init(this.$refs.myChart, 'light')	// 初始化echarts, theme为light
            let option =  {
                        legend: {
                            data: ['X轴', 'Y轴', 'Z轴'],
                        },
                        xAxis: {
                            type: 'category',
                            data: this.date
                        },
                        yAxis: {
                            type: 'value',
                            name: '角度'
                        },
                        series: [
                            {
                                name: 'X轴',
                                data: this.X,
                                type: 'line',
                                smooth: true
                            },
                            {
                                name: 'Y轴',
                                data: this.Y,
                                type: 'line',
                                smooth: true
                            },
                            {
                                name:'Z轴',
                                data: this.Z,
                                type: 'line',
                                smooth: true
                            }
                        ]
                    }
            this.myChart.setOption(option)	// echarts设置初始化选项
            setInterval(this.chartUpdata, 300)	// 两秒秒更新实时数据到折线图
        },
        created() {
            this.initArray(this.date)
            this.initArray(this.X)
            this.initArray(this.Y)
            this.initArray(this.Z)
        }
    }
</script>

<style lang="less" scoped>
    .el-card{
        width: 100%;
        height: 626px;
        border-radius: 20px;
        margin-top: 40px;
        transform: translateY(0);
        transition: .2s linear; 
        .text{
            width: 100%;
            height: 56px;
        }
        .mychart{
            width: 100%;
            height: 500px;
        }
    }
     
    .move:hover{
        box-shadow:0px 4px 4px #c8c8c8;
        transform: translateY(-6px);
        transition: .2s linear;
    }
</style>